﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>1.0helloworld</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>2.3todolist</h1>
<h2>v-model v-on v-for</h2>

<div id="app">
    <!--把input的value值和app实例中的$data中的inpValue的值进行了双向绑定 一个变化，另一个就会跟着变化-->
    <input type="text" v-model="inpValue" />
    <button @click="handleClick">提交</button>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>

</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    // 创建Vue实例，接管id为app的dom元素，数据是data里的content
    //页面可以通过{{}}的方式渲染
    var app = new Vue({
        el:'#app',
        data:{
            inpValue:'',
            list:['v-for是内置指令循环当前dom元素','v-on:click显得太臃肿，后期只要是事件的绑定都用@click这样的形式出面','v-model数据的双向绑定,另外一般v-model用于在表单元素下']
        },
        methods:{
            handleClick(){
                this.list.push(this.inpValue);//这里的this指的是app,  .list会直接从app这个实例中的$data中去找对应的键值
                this.inpValue = '';
            }
        }
    });
</script>

</body>
</html>
